<template>
    <div>
        <basic-container>
            <div class="app-container">
                <el-form :model="otherQuery" ref="queryForm" size="small" :inline="true">
                    <el-form-item label="工单名称">
                        <el-select v-model="otherQuery.task_id" filterable remote reserve-keyword placeholder="请输入关键词"
                            :remote-method="querySearchAsync" :loading="loading" clearable @clear="handleQuery">
                            <el-option v-for="item in restaurants" :key="item.task_id" :label="item.name"
                                :value="item.task_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机种名称">
                        <el-select v-model="otherQuery.aircraft_id" placeholder="请选择" clearable>
                            <el-option v-for="item in roleOptions" :key="item.aircraft_id" :label="item.aircraft"
                                :value="item.aircraft_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-select v-model="otherQuery.facility_id" placeholder="请选择" clearable>
                            <el-option v-for="item in menuList" :key="item.facility_id" :label="item.name"
                                :value="item.facility_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品SN">
                        <el-input v-model="otherQuery.sequence" placeholder="请输入产品SN码" clearable />
                    </el-form-item>
                    <el-form-item label="日期查询">
                        <el-date-picker v-model="value" clearable type="daterange" value-format="yyyy-MM-dd"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-download" size="mini"
                            @click="handleExport">导出</el-button>
                    </el-col>
                </el-row>
                <div>
                    <template>
                        <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
                            element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                            ref="table">
                            <el-table-column prop="aircraft" label="产品名称" align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.aircraft }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="facility_name" label="设备名称" align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.facility_name }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="orders" label="订单" align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.orders }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sequence" label="产品编码" align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.sequence }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="message" label="测试最终数据" align="center">
                                <template slot-scope="scope">
                                    <div>
                                        <div v-for="(value, key) in scope.row.message" :key="key">
                                            <span style="color: red;">{{ key }}--</span>
                                            <span>{{ value }}</span>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="finish" label="完成时间" align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.finish }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="mark" label="是否合格" align="center">
                                <template slot-scope="scope">
                                    <div>{{ scope.row.mark }}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </div>
            <pagination v-show="toNum > 0" :total="toNum" :page.sync="otherQuery.index" :limit.sync="otherQuery.size"
                @pagination="gitMeassList" />
        </basic-container>
    </div>
</template>

<script>
import {
    getkindList,
    getdetails,
    // getdstation,
    // stationOutput,
    getdkind,
    getdTaskkind,
} from "@/api/data";
// import * as XLSX from 'xlsx';
export default {
    data() {
        return {
            roleOptions: [],
            cpkNumbe: 1,
            NubIndex: null,
            produInd: null,
            tabPosition: "left",
            tableData: [],
            productData: [],
            propObj: {
                multiple: true,
                value: "mark",
                label: "label",
                children: "children",
            },
            loading: false,
            towLad: false,
            showSearch: true,
            value1: [],
            total: 1,
            inMess: [],
            menuList: [],
            options: [
                {
                    value: "1",
                    label: "生效中",
                },
                {
                    value: "2",
                    label: "禁用",
                },
                {
                    value: "3",
                    label: "审核中",
                },
            ],
            // 弹出层标题
            title: "",

            open: false,
            toNum: 0,

            isExpandAll: false,
            restaurants: [],
            activeName: null,
            refreshTable: true,
            otherQuery: {
                facility_id: null,
                task_id: null,
                aircraft_id: null,
                start: null,
                finish: null,
                sequence: null,
                index: 1,
                size: 10,
            },
            queryParams: {
                index: 1,
                size: 1000,
            },
            value: null,

            form: {},

            rules: {
                role: [
                    { required: true, message: "角色名称不能为空", trigger: "blur" },
                ],
                describe: [
                    { required: true, message: "角色描述不能为空", trigger: "blur" },
                ],
            },
        };
    },
    created() {
        function formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        // 获取今天的日期
        const today = new Date();
        // 获取前三个月的日期
        const threeMonthsAgo = new Date(today);
        threeMonthsAgo.setMonth(today.getMonth() - 3);
        // 格式化日期为 "yyyy-MM-dd"
        const formattedToday = formatDate(today);
        const formattedThreeMonthsAgo = formatDate(threeMonthsAgo);
        this.queryParams.start = formattedThreeMonthsAgo
        this.queryParams.finish = formattedToday
        this.value = [formattedThreeMonthsAgo, formattedToday]
    },
    computed: {},

    mounted() {
        this.getdkindList();
        this.getList();
    },
    methods: {
        getList() {
            getkindList(this.queryParams).then((response) => {
                console.log(response);
                this.menuList = response.data.data;
                this.firstQuery()
            });
        },
        // handleAdd(row) {
        //     let seq = {
        //         sequence: row.sequence,
        //         facility_id: row.facility_id,
        //     };
        //     getdstation(seq).then((res) => {
        //         this.productData = res.data.data;
        //     });
        // },

        handleExport() {
            this.$confirm('是否将数据导出为EXcel文档？').then(() => {
                const params = new URLSearchParams();
                this.value == null ? '' : params.append('start', this.value[0]);
                this.value == null ? '' : params.append('finish', this.value[1]);
                this.otherQuery.sequence == null ? '' : params.append('sequence', this.otherQuery.sequence);
                this.otherQuery.aircraft_id == null ? '' : params.append('aircraft_id', this.otherQuery.aircraft_id);
                this.otherQuery.facility_id == null ? '' : params.append('facility_id', this.otherQuery.facility_id);
                this.otherQuery.task_id == null ? '' : params.append('task_id', this.otherQuery.task_id);
                const url = new URL('http://192.168.1.108:8080/api/query/station/output');
                url.search = params.toString();
                window.location.href = url.toString();
            })
        },

        firstQuery() {
            (this.otherQuery = {
                facility_id: null,
                task_id: null,
                aircraft_id: null,
                start: null,
                finish: null,
                index: 1,
                size: 10,
            }),
                this.otherQuery.start = this.value == null ? null : this.value.length > 0 ? this.value[0] : null
            this.otherQuery.finish = this.value == null ? null : this.value.length > 0 ? this.value[1] : null
            this.gitMeassList();

        },
        gitMeassList() {
            this.loading = true;
            console.log(this.otherQuery);
            setTimeout(() => {
                getdetails(this.otherQuery).then((res) => {
                    this.tableData = res.data.data;
                    this.toNum = res.data.total;
                    this.loading = false;
                });
            }, 300);
        },
        handleQuery() {
            this.value = this.value == null ? [] : this.value;
            let queryData = {
                start: this.value.length > 0 ? this.value[0] : null,
                finish: this.value.length > 0 ? this.value[1] : null,
                facility_id: this.otherQuery.facility_id,
                task_id: this.otherQuery.task_id,
                aircraft_id: this.otherQuery.aircraft_id,
                sequence: this.otherQuery.sequence
            };
            getdetails(queryData).then((res) => {
                this.tableData = res.data.data;
                this.toNum = res.data.total;
            });
        },
        getdkindList() {
            getdkind().then((res) => {
                this.roleOptions = res.data.data;
            });
        },
        querySearchAsync(queryString) {
            if (queryString == null) return;
            console.log(queryString);
            let quey = {
                name: queryString,
            };
            getdTaskkind(quey).then((res) => {
                console.log(res);
                this.restaurants = res.data.data;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container .el-tabs__item {
    height: 30px !important;
    line-height: 80px;
}


.message {
    background: #f8f8f9;
    width: 2800px;
    display: flex;


}

.activeClass {
    color: red;
}
</style>
